/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
<template>
    <mListConstruction title="">
        <template slot="content">
            <div style="margin-top:20px;">
                <mStatistics :unit="unit"></mStatistics>
            </div>
            <div class="mt20">
                <div class="idc-list">
                    <div v-for="(item,index) in workerGroupList" :key="item.name" class="idc-item">
                      <ICount :index="index" :title="item.name" :data="item" :className="item.key"></ICount>
                    </div>
                </div>
            </div>
        </template>
    </mListConstruction>
</template>

<script>
  import { mapActions } from 'vuex'
  import mStatistics from './_source/statistics'
  import ICount from './_source/ICount'
  import mListConstruction from '@/module/components/listConstruction/listConstruction'
  export default {
    name: 'home',
    components: { mListConstruction, mStatistics, ICount },
    data () {
      return {
        workerGroupList: []
        // workerGroupList: [{
        //   name: '长沙超算中心',
        //   key: 'cs',
        //   data: {
        //     host: 8,
        //     vm: 15,
        //     container: 0,
        //     cpu: 108,
        //     ram: 240,
        //     gpu: 0,
        //     storage: 8
        //   }
        // }, {
        //   name: '证通云谷数据中心',
        //   key: 'zt',
        //   data: {
        //     host: 3,
        //     vm: 12,
        //     container: 0,
        //     cpu: 48,
        //     ram: 96,
        //     gpu: 0,
        //     storage: 2
        //   }

        // }, {
        //   name: '长沙大数据中心',
        //   key: 'csdsj',
        //   data: {
        //     host: 6,
        //     vm: 20,
        //     container: 0,
        //     cpu: 48,
        //     ram: 128,
        //     gpu: 0,
        //     storage: 1
        //   }
        // }, {
        //   name: '湘潭大数据中心',
        //   key: 'xt',
        //   data: {
        //     host: 2,
        //     vm: 17,
        //     container: 0,
        //     cpu: 32,
        //     ram: 31,
        //     gpu: 0,
        //     storage: 1
        //   }
        // }]
      }
    },
    created () {
      this._getList()
    },
    methods: {
      ...mapActions('security', ['getWorkerGroups', 'getWorkerGroupGPUInfo']),
      _getList () {
        this.getWorkerGroups({ pageSize: 100, pageNo: 1, node: 1 }).then(res => {
          this.workerGroupList = res.totalList.filter(e => e.name !== 'default')
        }).catch(e => {
        })
      }
    },
    mounted () {

    }
  }
</script>
<style scoped lang="scss">
.idc-list {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    margin:0 -10px;
    padding-bottom: 20px;
    .idc-item {
        flex:0 1 50%;
        padding:0 10px;
        // margin:0 -10px;

        &:nth-child(n+3) {
          margin-top: 20px;
        }

    }
}
</style>
